<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex and large img</title>
    <style>
        @page {
            size: 100px 100px;
            margin: 0;
        }
        * {
            margin: 0;
        }
        :root {
            font-size: 9px;
        }
        img {
            max-width: 100%;
            max-height: 100%;
            display: block;
        }
        #top {
            height: 50px;
        }
        #flex {
            background: #DFD;
            display: flex;
        }
        #item1, #item3 {
            flex: none;
            width: 10px;
        }
    </style>
</head>
<body>
<div id="top">A green box should be on the first page.</div>
<div id="flex">
    <div id="item1"></div>
    <div id="item2">
        <p>
        <!-- width=100px, height=60px -->
        <img src="data:image/svg+xml,%3Csvg%20width%3D%22100px%22%20height%3D%2260px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E">
        </p>
    </div>
    <div id="item3"></div>
</div>
</body>
</html>